<template>
  <view>
    <view class="info">
      <view class="info_item">
        <view class="item_content" style="border: none">
          <view class="item_left">头像</view>
          <view class="item_right">
            <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <view
                class="img"
                :style="{
                  backgroundImage: `url(${
                    user.icon || ossImg('personal/moren_avatar.png')
                  })`,
                }"
              />
            </button>
          </view>
        </view>
      </view>

      <view class="info_item">
        <view class="item_content">
          <view class="item_left">姓名</view>
          <view class="item_right">
            <input
              type="nickname"
              v-model="user.nickname"
              @blur="nameChange($event)"
              placeholder="请输入"
            />
          </view>
        </view>
      </view>

      <view class="info_item" v-if="user.authorizationStatus === 1">
        <view class="item_content">
          <view class="item_left">手机号</view>
          <view class="item_right">
            <input v-model="user.phone" disabled placeholder="请输入" />
          </view>
        </view>
      </view>

      <view class="info_item">
        <view class="item_content">
          <view class="item_left">性别</view>
          <view class="item_right">
            <picker
              :value="user.gender"
              @change="genderChange($event)"
              :range="genderList"
              range-key="text"
            >
              <view>{{ genderList[user.gender].text }}</view>
            </picker>
            <image class="arrow" :src="ossImg('personal/go@2x.png')" />
          </view>
        </view>
      </view>

      <view class="info_item">
        <view class="item_content">
          <view class="item_left">生日</view>
          <view class="item_right">
            <picker
              mode="date"
              :value="user.birthday"
              @change="birthdayChange($event)"
            >
              <view>{{ user.birthday || "请选择" }}</view>
            </picker>
          </view>
        </view>
      </view>

      <view class="info_item">
        <view class="item_content">
          <view class="item_left">地区</view>
          <view class="item_right">
            <picker
              mode="region"
              :value="site"
              @change="locationChange($event)"
            >
              <view>{{ user.location || "请选择" }}</view>
            </picker>
          </view>
        </view>
      </view>

      <view class="info_item">
        <view class="item_content">
          <view class="item_left">注销账户</view>
          <view class="item_right" @click="toLogout">
            注销后无法恢复，请谨慎操作
            <image class="arrow" :src="ossImg('personal/go@2x.png')" />
          </view>
        </view>
      </view>
    </view>
  </view>

  
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { updateInfo } from "@/services/biscuit";
import { ossImg, message } from "@/utils/utils";
import { ref } from "vue";
import privacyPopup from "@/components/privacy-popup";

const user = ref(getApp().globalData.user);
const site = ref("");
const genderList = [
  {
    value: 0,
    text: "男",
  },
  {
    value: 1,
    text: "女",
  },
];

const setUserInfo = (body) => {
  return new Promise(async (resolve, reject) => {
    const { nickname, gender, birthday, location, icon } = body;
    const res = await updateInfo({
      nickname,
      gender,
      birthday,
      location,
      icon,
    });
    console.log(res);
    if (res?.code === 200) {
      message("修改成功");
      resolve(res);
    } else {
      message(res.message);
      reject(res.message);
    }
  });
};

const onChooseAvatar = (e) => {
  console.log(e);
  uni.showLoading({ title: "上传中" });
  uni.uploadFile({
    url: process.env.BASE_API + "s-content/api/material/upload", //服务器地址
    fileType: "image",
    filePath: e.detail.avatarUrl,
    name: "file",
    formData: {},
    header: {
      "content-type": "multipart/form-data",
      Authorization: `Bearer ${uni.getStorageSync("TOKEN")}`,
    },
    success: (uploadFileRes) => {
      console.log(uploadFileRes);
      setUserInfo({ icon: JSON.parse(uploadFileRes.data).data }).then((res) => {
        if (res?.code === 200) {
          user.value.icon = JSON.parse(uploadFileRes.data).data;
        }
      });
    },
    complete: (res) => {
      uni.hideLoading();
    },
  });
};

const genderChange = (e) => {
  console.log(e);
  setUserInfo({ gender: parseInt(e.detail.value) }).then((res) => {
    if (res?.code === 200) {
      user.value.gender = parseInt(e.detail.value);
    }
  });
};

const birthdayChange = (e) => {
  console.log(e);
  setUserInfo({ birthday: e.detail.value }).then((res) => {
    if (res?.code === 200) {
      user.value.birthday = e.detail.value;
    }
  });
};

const locationChange = (e) => {
  console.log(e);
  setUserInfo({ location: e.detail.value.join(",") }).then((res) => {
    if (res?.code === 200) {
      user.value.location = e.detail.value.join(",");
    }
  });

  // user.value.birthday = e.detail.value
  // console.log(user.value)
};

const nameChange = (e) => {
  console.log(e);
  if (e.detail.value === "") return message("名称不能为空");
  setUserInfo({ nickname: e.detail.value }).then((res) => {
    if (res?.code === 200) {
      user.value.nickname = e.detail.value;
    }
  });
};

const toLogout = () => {
  uni.navigateTo({
    url: "/personalPages/cancellation/index",
  });
};

onShow(() => {
  console.log(user.value);
  getApp().accessLogAdd();
});
</script>
<style lang="less" scoped>
.info {
  margin: 10px;
  box-sizing: border-box;
  background-color: #fff;

  .info_item {
    width: 100%;

    .item_content {
      box-sizing: border-box;
      border-top: solid 1px #ddd;
      padding: 15px 0px;
      margin-left: 15px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .item_left {
        margin: auto 0px;
      }

      .item_right {
        margin-right: 15px;
        height: 100%;
        color: #999;
        font-size: 14px;

        input {
          text-align: right;
        }

        picker {
          display: inline-block;
          margin-right: 5px;
        }

        .arrow {
          width: 10rpx;
          height: 18rpx;
        }

        .img {
          width: 50px;
          height: 50px;
          background-color: #ddd;
          border-radius: 50%;
          background-repeat: no-repeat;
          background-position: top;
          background-size: cover;
        }
      }
    }
  }
}

button {
  padding: 0;
  background: none;
}
button::after {
  border: none;
}
</style>
